<template>
  <div>
    <search-card ref="search" @onSearch="handleSearch" />

    <el-card style="margin-top: 20px">
      <div slot="header" class="clearfix" style="text-align: right">
        <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          @click="handleAdd"
          >新 增</el-button
        >
      </div>

      <table-list
        :table-data="tableData"
        :loading="loading"
        :total-size="totalSize"
        :current-page="pageNo"
        @click="handleOperation"
        @page-size="handlePageChange"
      />
      <div style="margin-top: 20px; text-align: right">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="totalSize"
          :current-page.sync="pageNo"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import SearchCard from "./components/SearchCard";
import TableList from "./components/TableList";
import { queryArticleList, enableArticle, delArticle } from "@/api";

export default {
  name: "MediaPage",
  components: {
    SearchCard,
    TableList,
  },
  data() {
    return {
      tableData: [],
      pageSize: 10,
      pageNo: 1,
      totalSize: 0,
      loading: true,
    };
  },
  mounted() {
    this.queryArticleList();
  },
  methods: {
    handleSearch(values) {
      this.pageNo = 1;
      this.$nextTick(() => {
        this.queryArticleList(values);
      });
    },
    handleAdd() {
      this.$router.push({
        path: "edit",
      });
    },
    async queryArticleList(query = {}) {
      const params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        type: 2,
        ...query,
      };
      this.loading = true;
      const { data } = await queryArticleList(params);
      const { list = [], totalSize } = data;
      this.loading = false;
      if (list) {
        this.tableData = list;
        this.totalSize = totalSize;
      }
    },
    handleOperation(data) {
      switch (data.eventType) {
        case "switch":
          this.handleSwitch(data);
          break;
        case "delete":
          this.$confirm("确定删除该条资讯吗, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.handleDelete(data);
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消删除",
              });
            });

          break;
        default:
          break;
      }
    },
    // 开启/关闭
    async handleSwitch(rowData) {
      try {
        const res = await enableArticle({
          id: rowData.id,
          show: rowData.isShow,
        });
        if (res.retcode === 200) {
          this.$message({ message: "操作成功", type: "success" });
          this.queryArticleList();
        } else {
          this.$message({ message: "操作失败", type: "error" });
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 删除
    async handleDelete(rowData) {
      try {
        const res = await delArticle({ id: rowData.id });
        if (res.retcode === 200) {
          this.$message({ message: "删除成功", type: "success" });
          this.queryArticleList();
        } else {
          this.$message({ message: "删除失败", type: "error" });
        }
      } catch (error) {
        console.log(error);
      }
    },
    handlePageChange(size) {
      this.pageNo = size;
      const serchValue = this.$refs.search.searchForm;
      this.queryArticleList(serchValue);
    },
  },
};
</script>
